window.scrollTo(0, 0);

$(window).ready(function () {
    /********************************addEventListener兼容处理*******************************/

    var EventUtil = {
        // 添加事件监听
        add: function (element, type, callback) {

            if (element.addEventListener) {
                element.addEventListener(type, callback, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, callback);
            } else {
                element['on' + type] = callback;
            }
        }
    };
    //监听窗口宽度变化并执行setHtmlFontSize函数
    EventUtil.add(window, 'resize', function (e) {
        setHtmlFontSize();
    });
    var ratio = 100;
    function setHtmlFontSize() {
        deviceWidth = document.documentElement.clientWidth > 1920 ? 1920 : document.documentElement.clientWidth;
        deviceWidth = document.documentElement.clientWidth < 1000 ? 1000 : document.documentElement.clientWidth;
        document.getElementsByTagName('html')[0].style.cssText = 'font-size:' + deviceWidth / 19.2 + 'px !important';
        ratio = deviceWidth / 19.2;
    };
    setHtmlFontSize();

    $('.section-1').css({ 'opacity': 1, 'top': 0 })

    var wwidth = 19.2 * ratio;
    var wheight = 10.8 * ratio;
    $('.animation_canvas,.dec-box').css({ width: wwidth, height: wheight });



    // ------------------------------- 场景 初始化----------------------------
    window.sceneList = [];
    // 场景1
    var scene1 = new Xscene();
    // 基础属性赋值
    // 场景开始坐标
    scene1.startY = 0;
    // 场景结束坐标
    scene1.endY = 3500;
    // 动画图片资源前缀
    scene1.imgPath = "image/video/v0/x";
    // 动画图片初始序号
    scene1.imgNo = 300000;
    // 动画总帧数
    scene1.amSize = 249;
    // 动画速度表
    scene1.speedometer = [
        { index: 0, speed: 1 },
    ];
    // canvas 初始化
    scene1.init("animation_canvas").play();
    // 添加动作
    scene1.addAct(function (scene) {
        var currentY = scene.currentY;
        if (currentY > 2000) {
            if (currentY < 4000) {
                var opt = (currentY - 2000) / 2000
                if (opt < 0.1) {
                    opt = 0
                }
                if (opt > 0.9) {
                    opt = 1
                }
                $('.section-1 .slogan1-1').css({
                    'transform': 'translateY(' + (2 * ratio - ((currentY - 2000) / 2000 * 2 * ratio) - 0.8 * ratio) + 'px)',
                    'opacity': opt
                })
            }
            if (currentY > 3000 && currentY < 4500) {
                var opt = (currentY - 3000) / 1500
                if (opt < 0.1) {
                    opt = 0
                }
                if (opt > 0.9) {
                    opt = 1
                }
                $('.section-1 .slogan1-2').css({
                    'transform': 'translateY(' + (2 * ratio - ((currentY - 3000) / 1500 * 2 * ratio) - 0.8 * ratio) + 'px)',
                    'opacity': opt
                })
            }
            if (currentY > 3500 && currentY < 5000) {
                var opt = (currentY - 3500) / 2000
                if (opt < 0.1) {
                    opt = 0
                }
                if (opt > 0.9) {
                    opt = 1
                }
                $('.section-1 .line-2').css({
                    'transform': 'translateY(' + (2 * ratio - ((currentY - 3500) / 1500 * 2 * ratio) - 0.8 * ratio) + 'px)',
                    'opacity': opt
                })
            }

            if (currentY >= 5000) {
                var opt = (currentY - 5000) / 1000
                if (opt < 0.1) {
                    opt = 0
                }
                if (opt > 0.9) {
                    opt = 1
                }
                $('.section-1').css({
                    'transform': 'translateY(' + -((currentY - 5000) / 1000 * $(window).height()) + 'px)',
                    'opacity': 1 - opt
                })
            } else {
                $('.section-1').css({
                    'transform': 'translateY(' + 0 + 'px)',
                    'opacity': 1
                })
            }
        } else {
            // 文字元素归位初始状态
            $('.section-1 .slogan1-1').css({
                'transform': 'translateY(' + (2 * ratio) + 'px)',
                'opacity': 0
            })
            $('.section-1 .slogan1-2').css({
                'transform': 'translateY(' + (2 * ratio) + 'px)',
                'opacity': 0
            })
            $('.section-1 .line-2').css({
                'transform': 'translateY(' + (2 * ratio) + 'px)',
                'opacity': 0
            })
        }
    })
    sceneList.push(scene1);

    // 场景2
    var scene2 = new Xscene();
    // 基础属性赋值
    // 场景开始坐标
    scene2.startY = 6000;
    // 场景结束坐标
    scene2.endY = 7000;
    // 动画图片资源前缀
    scene2.imgPath = "image/video/v1/v";
    // 动画图片初始序号
    scene2.imgNo = 10000;
    // 动画总帧数
    scene2.amSize = 60;
    // 动画速度表
    scene2.speedometer = [
        { index: 0, speed: 2 },
    ];
    scene2.playCallback = function () { }
    // canvas 初始化
    scene2.init("animation_canvas2").play();
    // 添加动作
    scene2.addAct(function (scene) {
        var currentY = scene.currentY;

        if (currentY > 5000) {
            if (currentY < 6000) {
                var opt = (currentY - 5000) / 1000
                if (opt < 0.1) {
                    opt = 0
                }
                if (opt > 0.9) {
                    opt = 1
                }
                $('.section-2').css({
                    'transform': 'translateY(' + -((currentY - 5000) / 1000 * 20 * ratio) + 'px)',
                    'opacity': opt
                })
            }

            if (currentY >= 6000) {
                //场景2 摆正
                $('.section-2').css({
                    'transform': 'translateY(' + -(20 * ratio) + 'px)',
                    'opacity': 1
                })
                //文字缩放
                if (currentY > 8000) {

                    $('#animation_canvas2').css('opacity', 0)
                    $('#scl-img1').css({
                        'transform': 'translateY(-50%)' + ' scale(' + ((currentY - 8000) / 1000 + 1) + ')',
                        'opacity': 1
                    })
                    if (currentY > 11360) {
                        $('#scl-img1').css('opacity', 0)
                        $('#scl-img2').css({
                            'transform': 'translateY(-50%)' + ' scale(' + ((currentY - 11360) / 1000 + 1) + ')',
                            'opacity': 1
                        })

                        if (currentY > 13570) {
                            //end 14750
                            // 场景2 消失
                            var opt = 1 - ((currentY - 13570) / 1000)
                            if (currentY > 14750) {
                                opt = 0
                            }
                            $('.section-2').css({
                                'opacity': opt
                            })
                        }
                    } else {
                        $('#scl-img1').css('opacity', 1)
                        $('#scl-img2').css('opacity', 0)
                    }

                } else {
                    $('#scl-img').css('opacity', 0)
                    $('#animation_canvas2').css('opacity', 1)

                }
            }
        } else {
            $('.section-2').css({
                'transform': 'translateY(' + 20 * ratio + 'px)',
                'opacity': 0
            })
        }

    })
    sceneList.push(scene2);

    //场景3
    //场景出现时机 13750

    var scene3 = new Xscene();
    // 基础属性赋值
    // 场景开始坐标
    scene3.startY = 19500;
    // 场景结束坐标
    scene3.endY = 23500;
    // 动画图片资源前缀
    scene3.imgPath = "image/video/v2/v";
    // 动画图片初始序号
    scene3.imgNo = 20000;
    // 动画总帧数
    scene3.amSize = 475;
    // 动画速度表
    scene3.speedometer = [
        { index: 0, speed: 2 },
    ];
    scene3.playCallback = function () { }
    // canvas 初始化
    scene3.init("animation_canvas3").play();
    // 添加动作
    scene3.addAct(function (scene) {
        var currentY = scene.currentY;
        console.log(currentY)
        var dec1p = $('.section-3 .dec1').find('p')
        var dec2p = $('.section-3 .dec2').find('p')
        if (currentY >= 13750) {
            if (currentY < 14750) {
                var opt = (currentY - 13750) / 1000
                if (opt < 0.1) {
                    opt = 0
                }
                if (opt > 0.9) {
                    opt = 1
                }
                $('.section-3').css({
                    'transform': 'translateY(' + 20 * ratio - ((currentY - 13750) / 1000 * 20 * ratio) + 'px)',
                    'opacity': opt
                })
            } else {
                //场景3 摆正
                $('.section-3').css({
                    'transform': 'translateY(' + (-20 * ratio) + 'px)',
                    'opacity': 1
                })
                //文字1出现 14750  16750
                if (currentY < 15750) {
                    var opt = (currentY - 14750) / 1000
                    if (opt < 0.1) {
                        opt = 0
                    }
                    if (opt > 0.9) {
                        opt = 1
                    }
                    $(dec1p[0]).css({
                        'transform': 'translateY(' + (2 * ratio - ((currentY - 14750) / 1000 * 2 * ratio)) + 'px)',
                        'opacity': opt
                    })
                }

                if (currentY > 15000 && currentY <= 16000) {
                    var opt = (currentY - 15000) / 1000
                    if (opt < 0.1) {
                        opt = 0
                    }
                    if (opt > 0.9) {
                        opt = 1
                    }
                    $(dec1p[1]).css({
                        'transform': 'translateY(' + (2 * ratio - ((currentY - 15000) / 1000 * 2 * ratio)) + 'px)',
                        'opacity': opt
                    })
                }
                if (currentY < 15000) {
                    $(dec1p[1]).css({
                        'transform': 'translateY(' + (2 * ratio) + 'px)',
                        'opacity': 0
                    })
                }
                if (currentY > 16000) {
                    dec1p.css({
                        'transform': 'translateY(' + 0 + 'px)',
                        'opacity': 1
                    })
                    if (currentY > 16500) {
                        var opt = (currentY - 16500) / 1000
                        if (opt < 0.1) {
                            opt = 0
                        }
                        if (opt > 0.9) {
                            opt = 1
                        }
                        dec1p.css({
                            'transform': 'translateY(' + (- ((currentY - 16500) / 1000 * 2 * ratio)) + 'px)',
                            'opacity': 1 - opt
                        })
                    }
                    if (currentY > 17000 && currentY <= 18000) {
                        var opt = (currentY - 17000) / 1000
                        if (opt < 0.1) {
                            opt = 0
                        }
                        if (opt > 0.9) {
                            opt = 1
                        }
                        dec2p.css({
                            'transform': 'translateY(' + (2 * ratio - ((currentY - 17000) / 1000 * 2 * ratio)) + 'px)',
                            'opacity': opt
                        })
                    }
                    if (currentY < 17000) {
                        dec2p.css({
                            'transform': 'translateY(' + (2 * ratio) + 'px)',
                            'opacity': 0
                        })
                    }
                    if (currentY > 18000) {
                        dec2p.css({
                            'transform': 'translateY(' + 0 + 'px)',
                            'opacity': 1
                        })
                    }
                    if (currentY > 18500) {
                        var opt = (currentY - 18500) / 1000
                        if (opt < 0.1) {
                            opt = 0
                        }
                        if (opt > 0.9) {
                            opt = 1
                        }
                        dec2p.css({
                            'transform': 'translateY(' + (- ((currentY - 18500) / 1000 * 2 * ratio)) + 'px)',
                            'opacity': 1 - opt
                        })

                    }
                    if (currentY > 19500) {
                        var opt = (currentY - 19500) / 1000
                        if (opt < 0.1) {
                            opt = 0
                        }
                        if (opt > 0.9) {
                            opt = 1
                        }
                        $('.section-3 .media-img').css({
                            'opacity': opt
                        })
                    } else {
                        $('.section-3 .media-img').css({
                            'opacity': 0
                        })
                    }

                    if (currentY > 30000) {
                        var opt = (currentY - 30000) / 1000
                        if (opt < 0.1) {
                            opt = 0
                        }
                        if (opt > 0.9) {
                            opt = 1
                        }
                        $('.section-3').css({
                            'transform': 'translateY(' + (-20 * ratio - ((currentY - 30000) / 1000 * 20 * ratio)) + 'px)',
                            'opacity': 1 - opt
                        })
                    }
                    console.log(currentY)
                }
            }

        } else {
            //场景3 恢复原位
            $('.section-3').css({
                'transform': 'translateY(' + (20 * ratio) + 'px)',
                'opacity': 0
            })
        }
    })
    sceneList.push(scene3);

    //场景4 场景5
    var scene4 = new Xscene();
    // 基础属性赋值
    // 场景开始坐标
    scene4.startY = 31000;
    // 场景结束坐标
    scene4.endY = 32000;
    // 动画图片资源前缀
    scene4.imgPath = "image/video/v3/v";
    // 动画图片初始序号
    scene4.imgNo = 30000;
    // 动画总帧数
    scene4.amSize = 150;
    // 动画速度表
    scene4.speedometer = [
        { index: 0, speed: 1 },
    ];
    scene4.playCallback = function () { }
    // canvas 初始化
    scene4.init("animation_canvas4").play();
    // 添加动作
    scene4.addAct(function (scene) {
        var currentY = scene.currentY;

        var dec1p = $('.section-4 .dec1').find('p')
        var dec2p = $('.section-4 .dec2').find('p')
        var dec3p = $('.section-4 .dec3').find('p')
        if (currentY > 30000) {
            if (currentY < 31000) {
                var opt = (currentY - 30000) / 1000
                if (opt < 0.1) {
                    opt = 0
                }
                if (opt > 0.9) {
                    opt = 1
                }
                $('.section-4').css({
                    'transform': 'translateY(' + (-(currentY - 30000) / 1000 * 20 * ratio) + 'px)',
                    'opacity': opt
                })
            } else {
                //场景4 摆正
                $('.section-4').css({
                    'transform': 'translateY(' + (-20 * ratio) + 'px)',
                    'opacity': 1
                })
                if (currentY <= 32000) {
                    var opt = (currentY - 31000) / 1000
                    if (opt < 0.1) {
                        opt = 0
                    }
                    if (opt > 0.9) {
                        opt = 1
                    }
                    dec1p.css({
                        'transform': 'translateY(' + (2 * ratio - ((currentY - 31000) / 1000 * 2 * ratio)) + 'px)',
                        'opacity': opt
                    })
                }
                if (currentY <= 31000) {
                    dec1p.css({
                        'transform': 'translateY(' + (2 * ratio) + 'px)',
                        'opacity': 0
                    })
                }
                if (currentY > 32000) {
                    dec1p.css({
                        'transform': 'translateY(' + 0 + 'px)',
                        'opacity': 1
                    })
                }
                if (currentY > 33000 && currentY <= 33500) {
                    var opt = (currentY - 33000) / 500
                    if (opt < 0.1) {
                        opt = 0
                    }
                    if (opt > 0.9) {
                        opt = 1
                    }
                    dec1p.css({
                        'transform': 'translateY(' + (- ((currentY - 33000) / 500 * 2 * ratio)) + 'px)',
                        'opacity': 1 - opt
                    })
                }
                if (currentY > 33500) {
                    dec1p.css({
                        'transform': 'translateY(' + (-2 * ratio) + 'px)',
                        'opacity': 0
                    })
                }
                if (currentY > 34000 && currentY <= 34500) {
                    var opt = (currentY - 34000) / 500
                    if (opt < 0.1) {
                        opt = 0
                    }
                    if (opt > 0.9) {
                        opt = 1
                    }
                    dec2p.css({
                        'transform': 'translateY(' + (2 * ratio - ((currentY - 34000) / 500 * 2 * ratio)) + 'px)',
                        'opacity': opt
                    })
                }
                if (currentY <= 34000) {
                    dec2p.css({
                        'transform': 'translateY(' + (2 * ratio) + 'px)',
                        'opacity': 0
                    })
                }
                if (currentY > 35000) {
                    dec2p.css({
                        'transform': 'translateY(' + (-2 * ratio) + 'px)',
                        'opacity': 0
                    })
                }
                if (currentY > 35500 && currentY <= 36000) {
                    var opt = (currentY - 35500) / 500
                    if (opt < 0.1) {
                        opt = 0
                    }
                    if (opt > 0.9) {
                        opt = 1
                    }
                    dec3p.css({
                        'transform': 'translateY(' + (2 * ratio - ((currentY - 35500) / 500 * 2 * ratio)) + 'px)',
                        'opacity': opt
                    })
                }
                if (currentY <= 35500) {
                    dec3p.css({
                        'transform': 'translateY(' + (2 * ratio) + 'px)',
                        'opacity': 0
                    })
                }
                if (currentY > 36000) {
                    dec3p.css({
                        'transform': 'translateY(' + 0 + 'px)',
                        'opacity': 1
                    })
                    if (currentY <= 37000) {
                        var opt = (currentY - 36000) / 1000
                        if (opt < 0.1) {
                            opt = 0
                        }
                        if (opt > 0.9) {
                            opt = 1
                        }
                        $('.section-4').css({
                            'transform': 'translateY(' + (-20 * ratio - ((currentY - 36000) / 1000 * 20 * ratio)) + 'px)',
                            'opacity': 1 - opt
                        })
                        $('.section-5').css({
                            'transform': 'translateY(' + (-((currentY - 36000) / 1000 * 20 * ratio)) + 'px)',
                            'opacity': opt
                        })
                    }
                }

                if (currentY > 37000) {
                    $('.section-4').css({
                        'transform': 'translateY(' + (-40 * ratio) + 'px)',
                        'opacity': 0
                    })
                    $('.section-5').css({
                        'transform': 'translateY(' + (-20 * ratio) + 'px)',
                        'opacity': 1
                    })
                } else {
                    $('.section-5').css({
                        'transform': 'translateY(' + (-40 * ratio) + 'px)',
                        'opacity': 0
                    })
                }
                if (currentY > 37500) {
                    $('.section-5 .carm').css({
                        'background-image': 'url(image/part1/pimg1.png)',
                        'background-size': 14 * ratio + 'px',
                        'background-position-x': -0.5 * ratio + 'px',
                        'background-position-y': -2 * ratio + 'px'
                    })
                    $('.section-5 .carm .pro').css({
                        'background-image': 'url(image/part1/pro1.png)'
                    })
                }
                if (currentY > 38000) {
                    $('.section-5 .carm').css({
                        'background-image': 'url(image/part1/pimg2.png)',
                        'background-size': 20 * ratio + 'px',
                        'background-position-x': -5 * ratio + 'px',
                        'background-position-y': -6 * ratio + 'px'
                    })
                    $('.section-5 .carm .pro').css({
                        'background-image': 'url(image/part1/pro2.png)'
                    })
                }
                if (currentY > 38500) {
                    $('.section-5 .carm').css({
                        'background-image': 'url(image/part1/pimg3.png)',
                        'background-size': 24 * ratio + 'px',
                        'background-position-x': -7.6 * ratio + 'px',
                        'background-position-y': -4.6 * ratio + 'px'
                    })
                    $('.section-5 .carm .pro').css({
                        'background-image': 'url(image/part1/pro3.png)'
                    })
                }

                //场景5 消失 场景6 出现
                if (currentY > 39000 && currentY <= 40000) {
                    var opt = (currentY - 39000) / 1000
                    if (opt < 0.1) {
                        opt = 0
                    }
                    if (opt > 0.9) {
                        opt = 1
                    }
                    $('.section-5').css({
                        'transform': 'translateY(' + (-20 * ratio - ((currentY - 39000) / 1000 * 20 * ratio)) + 'px)',
                        'opacity': 1 - opt
                    })
                    $('.section-6').css({
                        'transform': 'translateY(' + (-((currentY - 39000) / 1000 * 20 * ratio)) + 'px)',
                        'opacity': opt
                    })
                }
                //场景6 恢复默认位置
                if (currentY < 39000) {
                    $('.section-6').css({
                        'transform': 'translateY(' + 20 * ratio + 'px)',
                        'opacity': 0
                    })
                }

                if (currentY > 40000) {
                    $('.section-5').css({
                        'transform': 'translateY(' + (-40 * ratio) + 'px)',
                        'opacity': 0
                    })
                    //场景6 摆正
                    $('.section-6').css({
                        'transform': 'translateY(' + -20 * ratio + 'px)',
                        'opacity': 1
                    })
                }

                if (currentY > 40500) {
                    var sec6_dec1p = $('.section-6 .dec1').find('p')
                    var sec6_dec2p = $('.section-6 .dec2').find('p')
                    if (currentY <= 41000) {
                        var opt = (currentY - 40500) / 500
                        if (opt < 0.1) {
                            opt = 0
                        }
                        if (opt > 0.9) {
                            opt = 1
                        }
                        sec6_dec1p.css({
                            'transform': 'translateY(' + (2 * ratio - ((currentY - 40500) / 500 * 2 * ratio)) + 'px)',
                            'opacity': opt
                        })

                    }
                    if (currentY > 41000) {
                        sec6_dec1p.css({
                            'transform': 'translateY(' + 0 + 'px)',
                            'opacity': 1
                        })
                    }
                    if (currentY > 41500 && currentY <= 42000) {
                        var opt = (currentY - 41500) / 500
                        if (opt < 0.1) {
                            opt = 0
                        }
                        if (opt > 0.9) {
                            opt = 1
                        }
                        sec6_dec1p.css({
                            'transform': 'translateY(' + (-2 * ratio - ((currentY - 41500) / 500 * 2 * ratio)) + 'px)',
                            'opacity': 1 - opt
                        })

                    }
                    if (currentY < 41500) {
                        sec6_dec2p.css({
                            'transform': 'translateY(' + -2 * ratio + 'px)',
                            'opacity': 0
                        })
                    }
                    if (currentY > 42000) {
                        sec6_dec1p.css({
                            'transform': 'translateY(' + -4 * ratio + 'px)',
                            'opacity': 0
                        })

                    }
                    if (currentY > 42500 && currentY <= 43000) {
                        var opt = (currentY - 42500) / 500
                        if (opt < 0.1) {
                            opt = 0
                        }
                        if (opt > 0.9) {
                            opt = 1
                        }
                        sec6_dec2p.css({
                            'transform': 'translateY(' + (2 * ratio - ((currentY - 42500) / 500 * 2 * ratio)) + 'px)',
                            'opacity': opt
                        })
                    }
                    if (currentY < 42500) {
                        sec6_dec2p.css({
                            'transform': 'translateY(' + -2 * ratio + 'px)',
                            'opacity': 0
                        })
                    }
                    if (currentY > 43000) {
                        sec6_dec2p.css({
                            'transform': 'translateY(' + 0 + 'px)',
                            'opacity': 1
                        })
                    }
                    if (currentY > 43500 && currentY <= 44000) {
                        var opt = (currentY - 43500) / 500
                        if (opt < 0.1) {
                            opt = 0
                        }
                        if (opt > 0.9) {
                            opt = 1
                        }
                        sec6_dec2p.css({
                            'transform': 'translateY(' + (-2 * ratio - ((currentY - 43500) / 500 * 2 * ratio)) + 'px)',
                            'opacity': 1 - opt
                        })
                        $('.section-6 .carm').css({
                            'opacity': opt
                        })

                    }
                    if (currentY < 43500) {
                        $('.section-6 .carm').css({
                            'opacity': 0
                        })
                    }
                    if (currentY > 44000) {
                        var opt = (currentY - 44000) / 500
                        if (opt < 0.1) {
                            opt = 0
                        }
                        if (opt > 0.9) {
                            opt = 1
                        }
                        $('.section-6 .carm').css({
                            'opacity': 1
                        })
                        sec6_dec2p.css({
                            'transform': 'translateY(' + (-4 * ratio) + 'px)',
                            'opacity': 0
                        })
                        $('.section-6 .pro').css({
                            'transform': 'translateX(' + (-0.2 * ratio + (opt * 13.8 * ratio)) + 'px)',
                        })
                    }
                    if (currentY > 44500) {
                        var opt = (currentY - 44500) / 500
                        if (opt < 0.1) {
                            opt = 0
                        }
                        if (opt > 0.9) {
                            opt = 1
                        }
                        $('.section-6 ').css({
                            'transform': 'translateY(' + (-2 * ratio - ((currentY - 43500) / 500 * 2 * ratio)) + 'px)',
                            'opacity': 1 - opt
                        })
                        $('.section-7 ').css({
                            'transform': 'translateY(' + (-2 * ratio - ((currentY - 43500) / 500 * 2 * ratio)) + 'px)',
                            'opacity': opt
                        })
                    }
                    if (currentY > 45000) {
                        $('.section-6 ').css({
                            'opacity': 0
                        })
                    }

                }
            }

        } else {
            $('.section-4').css({
                'transform': 'translateY(' + (20 * ratio) + 'px)',
                'opacity': 0
            })
        }

    })
    sceneList.push(scene4);

    // function setScene(startY,endY,imgPath,imgNo,amSize,speedometer,cid,fn) {
    //     var scene3 = new Xscene();
    //     // 基础属性赋值
    //     // 场景开始坐标
    //     scene3.startY = startY;
    //     // 场景结束坐标
    //     scene3.endY = endY;
    //     // 动画图片资源前缀
    //     scene3.imgPath = imgPath;
    //     // 动画图片初始序号
    //     scene3.imgNo = imgNo;
    //     // 动画总帧数
    //     scene3.amSize = amSize;
    //     // 动画速度表
    //     scene3.speedometer = speedometer;
    //     scene3.playCallback = function () { }
    //     // canvas 初始化
    //     scene3.init(cid).play();
    //     // 添加动作
    //     scene3.addAct(fn)
    //     sceneList.push(scene3);
    // }
    // ------------------------------- 场景 初始化----------------------------

    var currentY = $(window).scrollTop();

    // 速度计算相关
    var scaleTimer = null;
    var speedTime = 0;
    var distance = 0;
    var timeScale = 300;
    var currentSpeed = 0;
    $(window).scroll(function () {//开始监听滚动条
        // var vivo = ($('.main').height() - $(window).height()) / 100

        var newX = $(window).scrollTop();
        var oldX = currentY;

        // 简单统一windows平台与mac平台滚动单位距离
        var agent = navigator.userAgent.toLowerCase();
        if (agent.indexOf("win") >= 0 || agent.indexOf("wow") >= 0) {
            // 4.5 神秘的魔法字段，我感觉差不多4.5倍而已。
            distance += Math.abs(newX - oldX) / 4.5;

        } else {
            distance += Math.abs(newX - oldX);
        }

        currentY = newX;
        clearTimeout(scaleTimer);
        if (!speedTime) {
            speedTime = new Date().getTime();
        }
        scaleTimer = setTimeout(function () {
            var now = new Date().getTime();
            var diffTime = (now - speedTime - timeScale) / 1000;
            if (diffTime > 0.02) {
                currentSpeed = distance / diffTime;
            } else {
                currentSpeed = 0;
            }
            distance = 0;
            speedTime = 0;
            console.log("当前Scroll速度:", currentSpeed)
        }, timeScale)

        // 更新场景属性，执行场景动画与注册动作
        sceneList.forEach(function (item) {
            item.setAttribute("currentY", $(window).scrollTop())
                // .setAttribute("offset", newX - oldX) // 可不传，暂时无用
                .setAttribute("scrollSpeed", currentSpeed)
                .play();
        })
    })
})

/// 默认场景封装
function Xscene() {
    var self = this;
    this.currentY = 0;
    this.scrollSpeed = 0;
    this.offset = 0;// 可不传，暂时无用

    this.startY = 0;
    this.endY = 0;

    this.curUrl = "";
    this._curAmIndex = 0;

    this.imgPath = "";
    this.imgList = [];
    this.imgNo = 10000;
    this.amSize = 0;

    this.speedometer = [{ index: 0, speed: 1 }]
    this.animationSpeed = _getAmSpeed.call(this);

    this.actList = [];
    this.addAct = function (fn) {
        this.actList.push(fn);
        return this;
    }

    this._bufferAm = [];
    this.bufferAmNum = 10;

    this.init = function (pid) {
        var canvasPanel = document.createElement('canvas');
        canvasPanel.id = new Date().getTime();
        this.canvasPanel = canvasPanel;
        $('#' + pid).html(canvasPanel)
        canvasPanel.width = $('#' + pid).width();
        canvasPanel.height = $('#' + pid).height();
        canvasPanel.style.height = $('#' + pid).width();
        canvasPanel.style.width = $('#' + pid).width();
        this.context = canvasPanel.getContext('2d');
        var scence = this;
        function animationFrame() {
            if (scence.curUrl) {
                var img = scence.imgList[scence.curUrl];
                if (img == null) {
                    img = new Image();
                    img.src = scence.curUrl;
                    scence.imgList[scence.curUrl] = img;
                }
                scence.context.drawImage(img, 0, 0, canvasPanel.width, canvasPanel.height);
            }
            window.requestAnimationFrame(animationFrame);
        }
        animationFrame();
        this.animationSpeed = _getAmSpeed.call(this);
        return this;
    };

    this.setAttribute = function (key, value) {
        this[key] = value;
        return this;
    }
    this.play = function () {
        // 取消缓冲动画
        this._bufferAm.forEach(function (bam) {
            clearTimeout(bam)
        })
        this._bufferAm = [];
        // 动画播放
        if (this.imgPath != "" && this.amSize != 0) {
            // console.log(this.animationSpeed)
            var imgIndex = parseInt((this.currentY - this.startY) / (this.endY) * this.amSize) * (this.animationSpeed);
            if (imgIndex > this.amSize) {
                imgIndex = this.amSize;
            }
            if (imgIndex < 0) {
                imgIndex = 0;
            }
            var imgUrl = this.imgPath + (this.imgNo + imgIndex) + '.jpg';
            _amAction.call(this, imgIndex)
            if (this.playCallback) {
                this.playCallback(imgUrl);
            }
        }
        // 执行注册动作
        this.actList.forEach(function (item) {
            item(self);
        })
    }
    function _amAction(imgIndex) {

        var selft = this;
        var img = this.imgPath + (this.imgNo + imgIndex) + '.jpg';
        var self = this;
        setTimeout(function () {
            self.curUrl = img;
            self._curAmIndex = imgIndex;
            // console.log("NormalAM", new Date().getTime(), img)
        }, 50)


        for (var i = 1; i <= this.bufferAmNum; i++) {
            if (this.scrollSpeed > 300 && this.scrollSpeed < 1000 && (imgIndex + i) <= this.amSize) {
                var bufferImg = this.imgPath + (this.imgNo + imgIndex + i) + '.jpg';
                var bufferAm = setTimeout(function () {
                    self.curUrl = bufferImg;
                    self._curAmIndex = imgIndex + i;
                    console.log("BufferAm", new Date().getTime(), img)

                    if (selft._bufferAm.length > 0) {
                        var index = selft._bufferAm.indexOf(bufferAm);
                        selft._bufferAm.splice(index, 1);
                    }
                }, 50)
                this.scrollSpeed = this.scrollSpeed / 3 * 2;
                this._bufferAm.push(bufferAm);
            } else {
                // console.log("AnAcspeed", this.scrollSpeed)
            }
        }
    }
    function _getAmSpeed() {
        var rule = this.speedometer;
        // console.log(this.speedometer)
        var defaultSpeed = 1;
        rule.forEach(element => {
            if (this._curAmIndex >= element.index) {
                defaultSpeed = element.speed;
            }
        });
        return defaultSpeed;
    }
}
